<template>
    <!-- 请假申请 -->
    <div>
        <!-- 搜索表单区域 -->
        <common-form ref="searchUserFormRef" inline :form="searchForm" :formLabel="searchFormLabel" v-if="typeof(LeaveType)!=='undefined'">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchTable" @keyup.enter.native="searchTable">搜索</el-button>
            <el-button  icon="el-icon-refresh" size="mini" @click="resetTable">重置</el-button>
        </common-form>

        <!-- 表格区域 -->
        <el-table
        :data="tableData"
        :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
        v-loading="isLoading"
        style="width: 100%">
            <el-table-column label="序号" type="index" ></el-table-column>
            <el-table-column prop="CreatedDeptNo" label="部门编号" min-width="50"></el-table-column>
            <el-table-column label="员工工号" min-width="50">
                <template slot-scope="scope">
                    <div @click="openDetailDialog(scope.row)" class="detail_btn">
                        <div>{{scope.row.CreatedStaffNo}}</div>
                        <div>{{scope.row.CreatedNameCh}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="200px">
              <template slot-scope="scope">
                <div>
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.CreatedTime }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="请假时间" width="300px">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.StartDate}} - {{scope.row.EndDate}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="Hours" label="请假小时数" min-width="50"></el-table-column>
            <el-table-column prop="ProcessType" label="请假类型" align="center" min-width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="Reason" label="请假原因" align="center" min-width="120" ></el-table-column>
            <el-table-column prop="" label="审批状态" >
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.Status===1">
                    <el-tag effect="plain" type="warning">待审批</el-tag>
                  </span>
                  <span v-else-if="scope.row.Status===2">
                    <el-tag effect="plain" type="success">已通过</el-tag>
                  </span>
                  <span v-else>
                    <el-tag effect="plain" type="info">无效</el-tag>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ApproverName" label="审批人" min-width="50"></el-table-column>
            <!-- <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="openDetailDialog(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column> -->
        </el-table>

        <!-- 分页区域 -->
        <div class="myPagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.data.PageIndex"
            :page-sizes="[8, 20, 50]"
            :page-size="params.data.PageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="TotalCount">
          </el-pagination>
        </div>

        <!-- Dialog区域 -->
        <el-dialog title="申请详情" width="50%" :visible.sync="dialogDetailVisible" center>
            <div class="dialog_content">
                <el-scrollbar style="height:100%">
                    <div class="head"></div>
                    <div class="detail_content" v-if="detail.Content">
                        <div class="user">
                            <div class="user_img">
                                <img :src="detail.CreatedImage" alt="">
                            </div>
                            <div class="user_info">
                                <div class="name">
                                    <span class="ch">{{detail.CreatedNameCh}}</span>
                                    <span class="en">{{detail.CreatedNameEn}}</span>
                                </div>
                                <div class="prove"><i class="el-icon-s-order"></i> <span> 请假申请</span></div>
                            </div>
                        </div>
                        <div class="detail_item">
                            <span class="name">申请编号：</span>
                            <span class="text">{{detail.ApplyNo}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假开始日期：</span>
                            <span class="text">{{detail.Content.StartDate}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假结束日期：</span>
                            <span class="text">{{detail.Content.EndDate}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假小时：</span>
                            <span class="text">{{detail.Hours}} 小时</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假原因：</span>
                            <span class="text">{{detail.Content.Reason}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假类型：</span>
                            <span class="text">{{detail.ProcessType}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">上传图片：</span>
                            <span class="text">暂无上传图片</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">抄送人：</span>
                            <div class="box">
                                <span class="text" v-for="(item,index) in detail.Copiers" :key="index">
                                    {{item.NameCh}}<br>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="approver_content">
                        <div class="approver_title">
                            <span>审批流程</span>
                        </div>
                        <div class="approver_item" v-for="(item,index) in Approvers" :key="index">
                            <!-- <div class="approver_time">2021-01-09 13:01:50</div> -->
                            <div class="approver_time">{{item.ModifiedTime}}</div>
                            <div class="approver_profile">
                                <div class="profile">
                                    <img :src="item.Image" alt="">
                                </div>
                                <div class="dot"></div>
                            </div>
                            <div class="approver_person">
                                <div class="person_name">{{item.NameCh+"  "+item.NameEn}}</div>
                                <div class="person_del" v-if="item.Status===0">
                                    {{'提交申请'}}
                                    <span class="icon icon_success el-icon-check"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===1">
                                    {{'待审批'}}
                                    <span class="icon icon_more el-icon-more"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===2">
                                    {{'已审批'}}
                                    <span class="icon icon_success el-icon-check"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===3">
                                    {{'已驳回'}}
                                    <span class="icon icon_return el-icon-close"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===4">
                                    {{'当前申请单已关闭'}}
                                    <span class="icon icon_close el-icon-close"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===5">
                                    {{'已取消申请'}}
                                    <span class="icon icon_cancel el-icon-minus"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===6">
                                    {{'待查阅'}}
                                    <span class="icon icon_view el-icon-view"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===7">
                                    {{'已查阅'}}
                                    <span class="icon icon_success el-icon-view"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import CommonForm from '../../components/CommonForm'
import QS from 'qs'
export default {
  components: {
    CommonForm
  },
  data () {
    return {
      // 搜索表单
      searchForm: {
        Status: '', // 审批状态类型
        LeaveType: '', // 请假类型
        StaffNo: '', // 请假工号
        StaffName: '', // 请假人名字
        CreatedGroup: '', // 部门编号
        applayDate: '', // 申请请假时间
        leaveDate: '' // 请假时间
      },
      // 搜索表单label
      searchFormLabel: [],
      // 表格数据
      tableData: [],
      // 请求参数
      params: {
        data: {
          StaffNo: '',
          CreatedGroup: '',
          ApplyNo: '',
          Status: '0',
          Type: '1',
          LeaveType: '',
          CreatedStaffName: '',
          Created_StartDate: '',
          Created_EndDate: '',
          Leave_StartDate: '',
          Leave_EndDate: '',
          PageIndex: 1,
          PageSize: 8
        }
      },
      // 请假类型请求参数
      ProcessTypeQuery: {
        data: {
          ItemName: 'Level'
        }
      },
      // 部门类型请求参数
      DeptQuery: {
        data: {
          DeptType: 'HQ'
        }
      },
      isLoading: true,
      // 请假类型枚举
      LeaveType: [],
      // 部门类型枚举
      DeptType: [],
      // 分页信息
      TotalCount: 0,
      TotalPages: 0,
      // 详细信息
      detail: {},
      // 审批信息
      Approvers: [],
      // dialog显示控制
      dialogDetailVisible: false
    }
  },
  methods: {
    // 页数大小改变
    handleSizeChange (val) {
      // console.log('页数', val)
      this.params.data.PageSize = val
      this.getTableData()
    },
    // 页号改变
    handleCurrentChange (val) {
      // console.log('页号', val)
      this.params.data.PageIndex = val
      this.getTableData()
    },
    // 打开详细信息Dialog
    openDetailDialog (row) {
      this.dialogDetailVisible = true
      this.getDetail(row)
    },

    // 点击搜索返回表单数据
    searchTable () {
      this.params.data.PageIndex = 1
      var form = this.$refs.searchUserFormRef.form
      console.log('搜索表单', form)
      form.Status !== '' ? this.params.data.Status = form.Status : this.params.data.Status = '0'
      form.StaffName !== '' ? this.params.data.CreatedStaffName = form.StaffName : this.params.data.CreatedStaffName = ''
      form.StaffNo !== '' ? this.params.data.StaffNo = form.StaffNo : this.params.data.StaffNo = ''
      form.LeaveType !== '' ? this.params.data.LeaveType = form.LeaveType : this.params.data.LeaveType = ''
      form.CreatedGroup !== '' ? this.params.data.CreatedGroup = form.CreatedGroup : this.params.data.CreatedGroup = ''
      if (form.applayDate) {
        this.params.data.Created_StartDate = form.applayDate[0]
        this.params.data.Created_EndDate = form.applayDate[1]
      } else {
        this.params.data.Created_StartDate = this.params.data.Created_EndDate = ''
      }
      if (form.leaveDate) {
        this.params.data.Leave_StartDate = form.leaveDate[0]
        this.params.data.Leave_EndDate = form.leaveDate[1]
      } else {
        this.params.data.Leave_StartDate = this.params.data.Leave_EndDate = ''
      }

      this.getTableData()
    },
    // 点击重置表单数据
    resetTable () {
      this.params.data = {
        StaffNo: '',
        CreatedGroup: '',
        ApplyNo: '',
        Status: '0',
        Type: '1',
        LeaveType: '',
        CreatedStaffName: '',
        Created_StartDate: '',
        Created_EndDate: '',
        Leave_StartDate: '',
        Leave_EndDate: '',
        PageIndex: 1,
        PageSize: 8
      }
      for (const key in this.searchForm) {
        this.searchForm[key] = ''
      }
      this.getTableData()
    },

    // 构建搜索表单渲染内容
    createSearchFromLabel () {
      this.getProcessTypeEnum()
      this.getDeptTypeEnum()
      var searchFormLabel = [
        {
          model: 'Status',
          label: '审批状态',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: '1',
              label: '待审批'
            },
            {
              value: '2',
              label: '已通过'
            },
            {
              value: '3,5',
              label: '无效'
            }
          ]
        },
        {
          model: 'LeaveType',
          label: '请假类型',
          type: 'select',
          opts: this.LeaveType
        },
        {
          model: 'CreatedGroup',
          label: '所属部门',
          type: 'select',
          opts: this.DeptType
        },
        {
          model: 'StaffName',
          label: '请假人',
          type: 'input'
        },
        {
          model: 'StaffNo',
          label: '工号',
          type: 'input'
        },
        {
          model: 'applayDate',
          label: '创建时间',
          type: 'date'
        },
        {
          model: 'leaveDate',
          label: '请假时间',
          type: 'date'
        }
      ]
      this.searchFormLabel = searchFormLabel
    },
    // 获取详细信息
    async getDetail (row) {
      console.log('row', row)
      const { data: res } = await this.$http.get(`/Process/ProcessDetail?keyId=${row.KeyId}`)
      console.log('详细', res)
      this.detail = res.data
      this.detail.Hours = res.data.Hours = (res.data.Content.Minute / 60).toFixed(2)
      this.detail.Content.StartDate = res.data.Content.StartDate.replace('T', ' ')
      this.detail.Content.EndDate = res.data.Content.EndDate.replace('T', ' ')
      this.Approvers = res.data.Approvers.map(item => {
        if (item.ModifiedTime) {
          item.ModifiedTime = item.ModifiedTime.replace('T', ' ').substr(0, 16)
        }
        return item
      })
      var proveItem = {
        Image: this.detail.CreatedImage,
        ModifiedTime: this.detail.CreatedTime.replace('T', ' ').substr(0, 16),
        NameCh: this.detail.CreatedNameCh,
        NameEn: this.detail.CreatedNameEn,
        Status: 0
      }
      this.Approvers.unshift(proveItem)
      // console.log('detail', res)
      if (this.detail.CancelDateTime) {
        proveItem = {
          Image: this.detail.CreatedImage,
          ModifiedTime: this.detail.CancelDateTime.replace('T', ' ').substr(0, 16),
          NameCh: this.detail.CreatedNameCh,
          NameEn: this.detail.CreatedNameEn,
          Status: this.detail.Status
        }
        this.Approvers.push(proveItem)
      }
      console.log('app', this.Approvers)
    },

    // 获取请假类型枚举数据
    async getProcessTypeEnum () {
      const { data: res } = await this.$http.post('/SystemCode/Query', QS.stringify(this.ProcessTypeQuery))
      // console.log('枚举请假类型', res.date)
      // 构造枚举条件
      this.LeaveType.unshift({ value: '', label: '全部' })
      res.date.forEach((item, index) => {
        this.LeaveType.push({ value: item.KeyId, label: item.ItemCode })
      })
      // console.log('LeaveType', this.LeaveType)
    },
    // 获取部门枚举数据
    async getDeptTypeEnum () {
      const { data: res } = await this.$http.post('/SystemCode/GetDepartmentList', QS.stringify(this.DeptQuery))
      // console.log('枚举部门类型', res.data)
      // 构造枚举条件
      this.DeptType.unshift({ value: '', label: '全部' })
      res.data.forEach((item, index) => {
        // 根据value去重
        var isNeed = true
        for (var i = 0; i < this.DeptType.length; i++) {
          if (this.DeptType[i].value === item.DeptNo) {
            isNeed = false
          }
        }
        if (isNeed) {
          this.DeptType.push({ value: item.DeptNo, label: item.DeptNo + '_' + item.DeptName })
        }
      })
      // console.log('DeptType', this.DeptType)
    },
    // 获取表格列表数据
    async getTableData () {
      this.isLoading = true
      // console.log('传递参数', this.params)
      const { data: res } = await this.$http.post('/Process/ProcessPagedList', QS.stringify(this.params))
      console.log(res)

      this.TotalCount = res.data.TotalCount
      this.TotalPages = res.data.TotalPages
      this.tableData = res.data.InnerList.map((item, index) => {
        item.StartDate = item.Content.StartDate.replace('T', ' ').substr(0, 16)
        item.EndDate = item.Content.EndDate.replace('T', ' ').substr(0, 16)
        item.Hours = (item.Content.Minute / 60).toFixed(2)
        item.Reason = item.Content.Reason
        // console.log(item.ProcessType)
        // var i = item.ProcessType.indexOf('（')
        // if (i !== -1) {
        //   item.ProcessType = item.ProcessType.slice(0, i)
        // }
        return item
      })

      this.isLoading = false
    }
  },
  created () {
    this.createSearchFromLabel()
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
  border-color: #ddd;
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: #ddd;
}
    //
    .detail_btn{
      // border: 1px solid red;
      color:#54ae54;
      cursor: pointer;
    }
    // myPagination的css
    .myPagination{
      margin-top: 20px;
    }
    // Dialog的css
    /deep/.el-dialog__body{
        padding: 0;
    }
    .dialog_content{
        height: 70vh;
        // font-family: '微软雅黑';
        /deep/.el-scrollbar__wrap {
            overflow-x: hidden;
        }
        .head{
          height: 20px;
          background-color: #ebeced;
          margin-bottom: 20px;
        }
    }
    .detail_content{
        margin: 0 auto;
        padding-left: 10px;
        padding: 10px 15px 10px 35px;
        .user {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .user_img{
                width: 70px;
                height: 70px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 35%;
                img{
                    height: 100%;
                }
            }
            .user_info{
                font-weight: normal;
                font-size: 18px;
                .name{
                    color: #333333;
                    .ch {
                        margin-right: 15px;
                    }
                }
                .prove{
                    display: flex;
                    align-items: center;
                    color: #60e1c4;
                    .el-icon-s-order{
                        font-size: 40px;
                    }
                }
            }
        }
        .detail_item{
            display: flex;
            font-size: 18px;
            font-weight: normal;
            padding: 12px 0;
            .name {
                display: inline-block;
                color: #666666;
                font-weight: 600;
                width: 45%;
            }
            .box{
                height: 100px;
                // width: 200px;
            }
            .text{
                color: #333333;
            }
        }
    }
    .approver_content{
        padding: 0 20px 0 15px;
        color: #333333;
        .approver_title {
            font-size: 20px;
            border-left: 5px solid red;
            span {
                font-weight: 700;
                padding-left: 10px;
            }
        }
        .approver_item{
            display: flex;
            font-size: 18px;
            margin-bottom: 30px;
            .approver_time{
                flex: 2;
                display: flex;
                align-items: center;
                padding-left: 30px;
            }
            .approver_profile{
                flex: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                .profile{
                    width: 55px;
                    height: 55px;
                    border-radius: 50%;
                    border: 1px solid #ccc;
                    overflow: hidden;
                    margin-bottom: 18px;
                    img{
                        height: 100%;
                    }
                }
                .dot{
                    width: 12px;
                    height: 12px;
                    background-color: #bfc2c6;
                    border-radius: 50%;
                    overflow: hidden;
                }
            }
            .approver_person{
                flex: 5;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .person_name{
                    display: flex;
                    align-items: center;
                    height: 50px;
                    margin-bottom: 5px;
                }
                .person_del{
                    display: flex;
                    align-items: center;
                    height: 50px;
                    background-color: #eeeeee;
                    position: relative;
                    padding: 0 15px;
                    .icon {
                        position: absolute;
                        right: 15px;
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        overflow: hidden;
                        text-align: center;
                        line-height: 30px;
                        color: #fff;
                    }
                    .icon_more {
                        background-color: #403f46;
                    }
                    .icon_success {
                        background-color: #46c33b;
                    }
                    .icon_cancel {
                      background-color:#ff5565;
                    }
                    .icon_close {
                      background-color:#403f46;
                    }
                    .icon_view {
                      background-color: #00bbf1;
                    }
                    .icon_return {
                      background-color: red;
                    }
                    &::before{
                        content: " ";
                        display: block;
                        position: absolute;
                        width: 15px;
                        height: 15px;
                        background-color: #eeeeee;
                        left: 0;
                        transform: translate(-50%, 0%) rotate(45deg);
                    }
                }
            }
        }
    }

</style>
